<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { HotParams, HotItem, SubTypesItem } from '@/types/hot'
import { getHotAPI } from '@/api/hot'

// tab数据格式
let tabList = [
  {
    title: '全部',
    id: 1,
    dataItem: {
      list: new Array(5).fill(null),
      page: 1,
      pageSize: 5,
      pages: 2,
      counts: 10,
    },
    finish: false,
  },
  {
    title: '审核中',
    id: 2,
  },
  {
    title: '进行中',
    id: 3,
  },
  {
    title: '已完成',
    id: 3,
  },
]
// 激活tab项
let activeIndex = ref(0)
// 添加额外字段finish
const subTypes = ref<Array<SubTypesItem & { finish?: boolean }>>([])

const requestList = ref(12)
const finish = ref(false)
// 滚动触底事件
const scrolltolowerEvent = async () => {
  // 获取数据

  console.log(requestList.value, tabList[0])

  if (requestList.value > 15) {
    finish.value = true
    return
  }
  setTimeout(() => {
    requestList.value++
  }, 1000)
}
// 切换tab
// const tabChange = (e: { index: number }) => {
//   activeIndex.value = e.index;
//   getHotDataByTypes();
// };
onLoad(() => {
  // getHotData();
})
const onSwiperChange: UniHelper.SwiperOnChange = (ev) => {
  console.log(ev.detail.current, 'onswiperchange')
  activeIndex.value = ev.detail.current
}
</script>

<template>
  <view class="viewport">
    <!-- 搜索 -->
    <view class="search">
      <icon type="search" :size="16" class="search-icon" />
      <input class="search-input" placeholder="请输入" />
      <text class="search-btn">查询</text>
    </view>
    <!-- 当用户点击页面中的 Tab 后，切换展示相应的scroll-view-->
    <scroll-view scroll-x class="tabs-scroll-view" scroll-left="20" enhanced>
      <view class="tabs" hover-class="none" hover-stop-propagation="false">
        <text
          v-bind:class="{ active: index === activeIndex, text: true }"
          v-for="(tab, index) in 12"
          :key="index"
          @tap="activeIndex = index"
        >
          已挖成</text
        >
      </view>
    </scroll-view>
    <!-- 滚动列表 -->
    <swiper :current="activeIndex" @change="onSwiperChange" class="swiper-list">
      <swiper-item v-for="(tab, index) in tabList" :key="index">
        <scroll-view @scrolltolower="scrolltolowerEvent" scroll-y class="swiper-scroll-view">
          <view class="goods">
            <navigator
              hover-class="none"
              class="navigator"
              v-for="goods in requestList"
              :key="goods"
              :url="`/pages/goods/goods?id=`"
            >
              <view class="name">
                <text class="ellipsis">单号：20231122CC752749</text>
                <view>已完成</view>
              </view>
              <view class="properties" v-if="true">
                <view class="item" v-for="n in 4" :key="n">
                  <text class="label">业务类型</text>
                  <text class="value ellipsis">访客预约</text>
                </view>
              </view>
            </navigator>
          </view>
          <view class="loading-text">{{
            // tab?.finish ? "没有更多数据了~" : "正在加载..."
            finish ? '没有更多数据了~' : '正在加载...'
          }}</view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
page {
  box-sizing: border-box;
  height: 100%;
  background-color: #f4f4f4;
}
.viewport {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
/* 搜索 */
.search {
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 30rpx;
}
.search .search-icon {
  position: absolute;
  left: 32rpx;
}
.search .search-input {
  flex: 1;
  padding: 10rpx 20rpx 10rpx 60rpx;
  color: #8e8e8e;
  background-color: #fff;
  border-radius: 30rpx;
  margin-right: 20rpx;
}
.search .search-btn {
  padding: 10rpx 20rpx;
  color: #fff;
  border-radius: 10rpx;
  background: #92a5c1;
}
/** 选项卡 */
.tabs-scroll-view {
  width: auto;
  height: auto;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  margin-bottom: 10rpx;
  height: 100rpx;
  line-height: 80rpx;
}
.tabs {
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
  font-size: 30rpx;
  color: #333;
}
.tabs .text {
  margin: 0 20rpx;
  position: relative;
}
.tabs .active {
  color: #006bff;
}
.tabs .active::after {
  content: '';
  width: 80rpx;
  height: 6rpx;
  transform: translate(-50%);
  background-color: #006bff;
  position: absolute;
  left: 50%;
  bottom: 0rpx;
}
/** 滚动列表 */
.swiper-list {
  flex: 1;
}
.swiper-list .swiper-scroll-view {
  flex: 1;
  overflow: auto;
  // 非常重要：否则内容不可滑动
  height: 100%;
  white-space: nowrap;
}
.tabs-scroll {
  box-sizing: border-box;
  white-space: nowrap;
  width: 750rpx;
  // overflow: auto;
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  line-height: 90rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
  // border-radius: 10rpx;
  // box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  // background-color: #fff;
  view {
    width: 100%;
    flex: 1;
  }
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    color: #006bff;
    &::after {
      content: '';
      width: 80rpx;
      height: 6rpx;
      transform: translate(-50%);
      background-color: #006bff;
      position: absolute;
      left: 50%;
      bottom: -50%;
    }
  }
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.goods {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
  .navigator {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30rpx 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
    background-color: #fff;
  }
  .navigator:nth-child(1) {
    margin-top: 0;
  }
  .name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    height: 100rpx;
    font-size: 30rpx;
    border-bottom: 4rpx solid #eeeeee;
    text:nth-child(1) {
      flex: 1;
    }
    view {
      text-align: center;
      font-weight: 200;
      width: 160rpx;
      padding: 10rpx 20rpx;
      border-radius: 50rpx;
      background-color: #98affa;
      margin-left: 40rpx;
    }
  }
  .properties {
    padding-top: 10rpx;
    font-size: 26rpx;
    .item {
      display: flex;
      line-height: 2;
      padding: 5rpx;
      font-size: 26rpx;
      color: #333;
      // border-bottom: 1rpx dashed #ccc;
      .label {
        width: 160rpx;
        margin-right: 10rpx;
      }
      .value {
        flex: 1;
      }
    }
  }
  .symbol {
    font-size: 70%;
  }
  .decimal {
    font-size: 70%;
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>
